<template>
  <div class="riskReason_page_class">
    <div class="shadow_bg_class"
         style="width: 100%;color: #ffffff;padding: 12px ">


      <el-form ref="filters" :model="filters" label-width="100px">
        <el-row :gutter="20" style="margin-bottom: 0px">
          <el-col :span="8">
            <el-form-item label="原因类型：" style="margin-bottom: 0 !important;">
              <el-select v-model="filters.type" placeholder="请选择" clearable>
                <el-option
                    v-for="item in riskReasonTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="情形描述：" style="margin-bottom: 0 !important;">
              <el-input
                  v-model="filters.caseInfo"
                  placeholder="情形描述" clearable>
              </el-input>
            </el-form-item>

          </el-col>

          <el-col :span="8" style="display: flex;justify-content: space-between">
            <el-button type="primary"
                       style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                       @click="handleSearch">搜索
            </el-button>
            <el-button type="primary"
                       style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                       @click="tableOperate('add')">新建风险原因
            </el-button>

          </el-col>
        </el-row>

      </el-form>

    </div>
    <el-table :data="riskReasonList" class="wxtable" style="margin-top: 12px">
      <el-table-column
          type="index"
          label="序号" width="80" align='center'>
      </el-table-column>
      <el-table-column prop="type" label="原因类型" align='center' width="120">
        <template slot-scope="scope">
          <span v-show="scope.row.type==0">电流和电压原因</span>
          <span v-show="scope.row.type==1">温度和湿度原因</span>
        </template>
      </el-table-column>
      <el-table-column prop="lowerScore" label="下限报警分数" align='center' width="110">
      </el-table-column>
      <el-table-column prop="upperScore" label="上限报警分数" align='center' width="110">
      </el-table-column>
      <el-table-column prop="measure" label="措施" align='center'>
      </el-table-column>
      <el-table-column prop="reason" label="原因" align='center'>
      </el-table-column>

      <el-table-column label="操作" align='center'>
        <template slot-scope="scope">
          <el-button size="mini" type="warning" plain
                     @click="tableOperate('edit', scope.row)">编辑
          </el-button>
          <el-button size="mini" type="info" plain
                     @click="tableOperate('del', scope.row)" v-show="!scope.row.admin">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-floor">
      <div>

        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="riskReasonPage.page+1"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="riskReasonPage.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="riskReasonPage.count">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="新建风险原因" :visible.sync="addFormVisible" width="500px"
               :close-on-click-modal="false"
               center>
      <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
        <el-form-item label="上限报警分数：" prop="upperScore">
          <el-input-number v-model="addForm.upperScore" :min="1" :max="1000"  controls-position="right" label="上限报警分数"></el-input-number>
        </el-form-item>
        <el-form-item label="下限报警分数：" prop="lowerScore">
          <el-input-number v-model="addForm.lowerScore" :min="1" :max="1000"  controls-position="right" label="下限报警分数"></el-input-number>
        </el-form-item>
        <el-form-item label="原因类型：" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择" clearable>
            <el-option
                v-for="item in riskReasonTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="措施：" prop="measure">
          <el-input v-model="addForm.measure" type="textarea" :rows="2" placeholder="请输入措施"></el-input>
        </el-form-item>
        <el-form-item label="原因：" prop="reason">
          <el-input v-model="addForm.reason" type="textarea" :rows="2" placeholder="请输入原因"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer">
        <el-button @click.native="addFormVisible=false">取消
        </el-button>
        <el-button type="primary" @click.native="addFormSubmit" style="margin-left: 48px">提交
        </el-button>

      </div>
    </el-dialog>

    <el-dialog title="修改风险原因" :visible.sync="editFormVisible" width="500px"
               :close-on-click-modal="false"
               center>
      <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">

        <el-form-item label="上限报警分数：" prop="upperScore">
          <el-input-number v-model="editForm.upperScore" :min="1" :max="1000"  controls-position="right" label="上限报警分数"></el-input-number>
        </el-form-item>
        <el-form-item label="下限报警分数：" prop="lowerScore">
          <el-input-number v-model="editForm.lowerScore" :min="1" :max="1000"  controls-position="right" label="下限报警分数"></el-input-number>
        </el-form-item>
        <el-form-item label="原因类型：" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择" clearable>
            <el-option
                v-for="item in riskReasonTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="措施：" prop="measure">
          <el-input v-model="editForm.measure" type="textarea" :rows="2" placeholder="请输入措施" autosize="true"></el-input>
        </el-form-item>
        <el-form-item label="原因：" prop="reason">
          <el-input v-model="editForm.reason" type="textarea" :rows="2" placeholder="请输入原因" autosize="true"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click.native="editFormVisible=false">取消
        </el-button>
        <el-button type="primary" @click.native="editFormSubmit" style="margin-left: 48px">提交
        </el-button>

      </div>
    </el-dialog>
  </div>

</template>

<script>
import risk_reason_list_page_bus from './risk_reason_list_page_bus.js'

export default risk_reason_list_page_bus

</script>
<style scoped>

</style>
